<template>
  <div>
    <div class="detail-comment">
      <div class="comment-input">
        <textarea v-model="content" placeholder="友善是交流点起点"></textarea>
      </div>
      <div class="comment-action">
        <div><i class="iconfont iconfangda"></i></div>
        <div @click="doSubmit">发布</div>
      </div>
    </div>
    <div @click="SET_DETAILFOOTERSTATUS(true)" class="masker"></div>
  </div>
</template>

<script>
import { mapMutations, mapActions } from "vuex";
export default {
  props: {
    bdid: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      content: "",
    };
  },
  methods: {
    ...mapMutations("msbd", ["SET_DETAILFOOTERSTATUS"]),
    ...mapActions("detail", ["saveComment", "getList"]),
    async doSubmit() {
      if (this.content.trim() == "") {
        window.alert("评论内容不能为空！");
        return;
      }
      await this.saveComment({ bdid: this.bdid, content: this.content });
      this.content = ""; //?
      this.SET_DETAILFOOTERSTATUS(true);
      this.getList(this.bdid);
      alert("评论成功！");
    },
  },
};
</script>

<style scoped>
.detail-comment {
  display: flex;
  height: 100px;
  position: relative;
  z-index: 9999;
}

.comment-input {
  flex-grow: 1;
  display: flex;
}

.comment-input textarea {
  outline: none;
  flex-grow: 1;
  margin: 10px;
  padding: 10px;
  border: none;
  background-color: #eee;
  border-radius: 3px;
}

.comment-action {
  width: 60px;
  margin: 10px 10px 10px 0;
}

.comment-action i {
  font-size: 25px;
}

.comment-action div {
  text-align: right;
}

.comment-action div:first-child {
  height: 50px;
}

.masker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
}
</style>